<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
           <el-form-item label="巡检类型" prop="inspectionType">
            <el-select v-model="queryParams.type" clearable placeholder="请选择巡检类型" style="width: 200px;">
               <el-option v-for="item in inspectionList" :label="item.label" :value="item.value" :key="item.value"></el-option>
            </el-select>
           </el-form-item>
           <el-form-item>
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
       <!-- 表格数据 -->
        <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" align="center" width="55"/>
            <el-table-column label="店名" align="center" prop="shopName" />
            <el-table-column label="点检项" align="center" prop="checkType">
                <template #default="scope">
                    <span>{{ scope.row.checkType == 0 ? '卫生情况' : scope.row.checkType == 1 ? '人员穿着 ' 
                    : scope.row.checkType == 2 ? '物品摆放' : scope.row.checkType == 3 ? '玩手机' : scope.row.checkType == 4 ? '收银巡检' :  '其他' }}</span>
               </template>
            </el-table-column>
            <el-table-column label="处理人" align="center" prop="handlerUserName" />
            <el-table-column label="抄送人" align="center" prop="carbonUserName">
                <template #default="scope">
                    <span>{{ scope.row.carbonUserName?.slice(0, -1) }}</span>
               </template>
            </el-table-column>
            <el-table-column label="到期日" align="center" prop="expirationTime">
                <template #default="scope">
                    <span>{{ parseTime(scope.row.expirationTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="问题反馈" align="center" prop="remarks" />
            <el-table-column label="巡检类型" align="center" prop="type">
                <template #default="scope">
                    <span>{{ scope.row.type == 1 ? '手动点检' : '智能巡检' }}</span>
               </template>
            </el-table-column>
            <el-table-column label="是否有问题" align="center" prop="isProblem">
                <template #default="scope">
                    <span>{{ scope.row.isProblem == 0 ? '否' : scope.row.isProblem == 1 ? '是' : '' }}</span>
               </template>
            </el-table-column>
            <el-table-column label="是否需整改" align="center" prop="isChange">
                <template #default="scope">
                    <span>{{ scope.row.isChange == 0 ? '否' : scope.row.isChange == 1 ? '是' : '' }}</span>
               </template>
            </el-table-column>
            <el-table-column label="是否整改完成" align="center" prop="isFinish">
                <template #default="scope">
                    <span>{{ scope.row.isFinish == 0 ? '否' : scope.row.isFinish == 1 ? '是' : '' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="实际处理人" align="center" prop="practicalHandlerUserName" width="100"/>
            <el-table-column label="处理说明" align="center" prop="result" />
            <el-table-column label="处理时间" align="center" prop="handlingTime" />
            <el-table-column label="状态" align="center" prop="status" >
               <template #default="scope">
                    <span>{{ scope.row.status == 0 ? '待处理' : '已处理' }}</span>
               </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <span v-if="scope.row.status == 1">—</span>
                    <el-button v-else link type="primary" @click="handlerProblem(scope.row)" v-hasPermi="['remoteInspection:spotInspection:handle']">处理</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <pagination
         v-show="total > 0"
         :total="total"
         v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize"
         @pagination="getTableData"
      />
        <el-dialog title="点检处理" v-model="spotDialog" width="800px">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div style="display: flex;justify-content: center;align-items: center;height: 100%">待接入设备</div>
                </el-col>
                <el-col :span="12">
                    <ul class="check-resule">
                        <li>
                            <span>店名</span>
                            <span>{{ spotFormData.shopName }}</span>
                        </li>
                        <li>
                            <span>点检项</span>
                            <span> {{ spotFormData.checkType == 0 ? '卫生情况' : spotFormData.checkType == 1 ? '人员穿着 ' 
                            : spotFormData.checkType == 2 ? '物品摆放' : spotFormData.checkType == 3 ? '玩手机' : spotFormData.checkType == 4 ? '收银巡检' :  '其他' }}</span>
                        </li>
                        <li>
                            <span>处理人</span>
                            <span>{{ spotFormData.handlerUserName }}</span>
                        </li>
                        <li>
                            <span>抄送</span>
                            <span>{{ spotFormData.carbonUserName }}</span>
                        </li>
                        <li>
                            <span>到期日</span>
                            <span>{{ parseTime(spotFormData.expirationTime, '{y}-{m}-{d}') }}</span>
                        </li>
                        <li>
                            <span>问题反馈</span>
                            <span>{{ spotFormData.remarks }}</span>
                        </li>
                    </ul>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="22" :offset="1">
                    <el-divider />
                    <el-form ref="spotFormRef" :model="spotFormData" :rules="spotFormRules" label-width="120">
                        <el-form-item label="是否有问题" prop="isProblem">
                            <el-radio-group v-model="spotFormData.isProblem">
                              <el-radio :value="1">是</el-radio>
                              <el-radio :value="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="是否需整改" prop="isChange">
                            <el-radio-group v-model="spotFormData.isChange">
                              <el-radio :value="1">是</el-radio>
                              <el-radio :value="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="是否整改完成" prop="isFinish">
                            <el-radio-group v-model="spotFormData.isFinish">
                              <el-radio :value="1">是</el-radio>
                              <el-radio :value="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="处理时间" prop="handlingTime">
                            <el-date-picker
                                style="width: 100%"
                                v-model="spotFormData.handlingTime"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                type="datetime"
                                placeholder="请选择时间"
                            />
                        </el-form-item>
                        <el-form-item label="处理说明" prop="result">
                            <el-input
                                v-model="spotFormData.result"
                                :rows="3"
                                type="textarea"
                                placeholder="请输入处理说明"
                            />
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <template #footer>
            <el-divider />
            <div class="dialog-footer">
               <el-button @click=" spotDialog = false ">取 消</el-button>
               <el-button type="primary" @click="submitSpotInspection">提交</el-button>
            </div>
         </template>
        </el-dialog>


    </div>
</template>

<script setup>
import { getSpotInspectionData, getInfo, editInfo } from "@/api/remoteInspection/spotInspection";
const { proxy } = getCurrentInstance();
const total = ref(0);
const loading = ref(false);
const spotDialog = ref(false);
const spotFormRef = ref(null);
const tableData = ref([])
const queryParams = reactive({
    pageNum: 1,
    pageSize: 10,
    type: ""
})
const spotFormRules = ref({
    isProblem: [ { required: true, message: '请选择是否有问题', trigger: 'change' } ],
    isChange: [ { required: true, message: '请选择是否需要整改', trigger: 'change' } ],
    isFinish: [ { required: true, message: '请选择是否整改完成', trigger: 'change' } ],
    handlingTime: [ { required: true, message: '请选择处理时间', trigger: 'change' } ],
    result: [ { required: true, message: '请输入处理说明', trigger: 'blur' } ],
})
const inspectionList = ref([
    {
        label: "全部",
        value: 0,
    },
    {
        label: "手动点检",
        value: 1,
    },
    {
        label: "智能巡检",
        value: 2,
    }
])
const spotFormData = reactive({
    shopName: "",
    checkType: "",
    handlerUserName: "",
    carbonUserName: "",
    expirationTime: "",
    remarks: "",
    isProblem: "",
    isChange: "",
    isFinish: "",
    handlingTime: "",
    result: "",
})

onMounted(() => {
    getTableData()
})

//获取列表数据
const getTableData = () =>{
    loading.value = true;
    getSpotInspectionData(queryParams).then(res =>{
        if( res.code == 200 ){
            tableData.value = res.rows
            total.value = res.total || 0;
            loading.value = false
        }
    }).catch((err) => (loading.value = false));
}

// 搜索
const handleQuery = () =>{
    getTableData()
}

// 重置
const resetQuery= () =>{
    Object.assign(queryParams, {
        pageNum: 1,
        pageSize: 10,
        type: ""
    })
    getTableData()
}

//多选框选中数据
const handleSelectionChange = (selection) =>{

}
//处理
const handlerProblem = (row) =>{
    // spotFormRef.value.resetFields();
    proxy.resetForm("spotFormRef");
    getInfo(row.id).then(res =>{
        spotDialog.value = true
        res.data.carbonUserName = res.data.carbonUserName?.slice(0, -1)
        Object.assign(spotFormData, res.data)
    }) 
}
//提交
const submitSpotInspection = () =>{
    spotFormRef.value.validate((valid, fields) => {
        if (valid) {
            spotFormData.status = 1
            editInfo(spotFormData).then(res =>{
                if(res.code == 200){
                    ElMessage({
                        message: res.msg,
                        type: 'success',
                    })
                    spotDialog.value = false
                    getTableData()
                }else {
                    spotFormData.status = 0
                    ElMessage({
                        message: res.msg,
                        type: 'error',
                    })
                }
            }) 
        } else {
            spotFormData.status = 0
            console.log('error submit!', fields)
        }
    })
  
}
</script>

<style lang="scss" scoped>
:deep .el-form{
    .el-form-item{
        .el-form-item__label{
            justify-content: flex-start;
        }
    }
 }
 ul.check-resule{
    li{
        display: flex;
        margin-bottom: 10px;
        span:first-child{
            width: 80px;
            display: inline-block;
        }
    }
 }
</style>